

.chat-null {
	height: 0 !important;
	padding: 0 !important;
}

.chat-system {
	max-width: 75%;
	font-size: 26rpx;
	padding: 20rpx;
	line-height: 1.6;
	border-radius: 16rpx;
	margin: 10rpx auto;
	text-align: center;

	.metals {
		color: #c38b08;
		text-decoration: underline;
	}
}

.chat-time {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;

	text {
		padding: 5rpx 15rpx;
		font-size: 24rpx;
		color: #4C310C;
		background-color: #fff;
		border-radius: 2rpx;
	}
}

.chat-item {
	display: flex;
	padding: 20rpx 30rpx;

	&.flex-flow {
		flex-flow: row-reverse;

		.chat-content {
			background: #38D99D;

			&::after {
				left: unset;
				top: 30rpx;
				right: -16rpx;
				border-width: 16rpx 0 12rpx 24rpx;
				border-color: transparent transparent transparent #38D99D;
			}
		}

		.chat-voice {
			background: #38D99D;
			justify-content: flex-end;

			.bo-image {
				transform: rotate(180deg);
			}

			&::after {
				left: unset;
				top: 30rpx;
				right: -16rpx;
				border-width: 16rpx 0 12rpx 24rpx;
				border-color: transparent transparent transparent #38D99D;
			}
		}

		.chat-imgs {
			// &::after {
			// 	left: unset;
			// 	top: 30rpx;
			// 	right: -16rpx;
			// 	border-width: 16rpx 0 12rpx 24rpx;
			// 	border-color: transparent transparent transparent #fff;
			// }
		}

		.system-content {
			color: #ebebeb;
			background-color: #999;

		}
	}

	.chat-head {
		flex-shrink: 0;
		width: 90rpx;
		height: 90rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
			display: block;
		}
	}

	.chat-content {
		max-width: 480rpx;
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
		color: #181818;
		display: flex;
		align-items: center;
		position: relative;
		user-select: text;

		&::after {
			content: '';
			position: absolute;
			top: 30rpx;
			left: -16rpx;
			width: 0;
			height: 0;
			border-width: 16rpx 24rpx 12rpx 0;
			border-style: solid;
			border-color: transparent #fff transparent transparent;
		}
	}

	.chat-voice {
		max-width: 480rpx;
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
		color: #181818;
		display: flex;
		align-items: center;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 30rpx;
			left: -16rpx;
			width: 0;
			height: 0;
			border-width: 16rpx 24rpx 12rpx 0;
			border-style: solid;
			border-color: transparent #fff transparent transparent;
		}

		image {
			display: block;
		}

		.bo-image {
			width: 23rpx;
			height: 30rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
	}

	.chat-imgs {
		width: 250rpx;
		margin: 0 20rpx;
		border-radius: 12rpx;
		background-color: #fff;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}

	.chat-weixin {
		display: flex;
		align-items: center;
		height: 100rpx;

		.weixin-icon {
			padding-top: 20rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.weixin-no {
			font-size: 26rpx;
			color: #4C310C;

			span {
				color: #999;
			}

			view {
				font-weight: 600;
				font-size: 34rpx;
				color: #000;
			}
		}
	}
}

.chat-wx {
	font-size: 28rpx;
	min-width: 400rpx;
	//padding: 30rpx 50rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	color: #e5e5e5;
	line-height: 64rpx;
	//width: 480rpx;

	.weixin-icon {
		padding-top: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.top {
		position: relative;
		box-sizing: border-box;
		border-top-right-radius: 5rpx;
		border-top-left-radius: 5rpx;
		height: 170rpx;
		width: 480rpx;
		background-color: #FEF0BC;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #999;

		.hongbao {
			width: 90rpx;
			height: 90rpx;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.text {
			height: 90rpx;
			width: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			text:nth-child(1) {
				color: #000;
				font-size: 16px;
			}

			text:nth-child(2) {
				color: #666;
				font-size: 12px;
			}
		}

		.sanjiao1 {
			width: 0;
			height: 0;
			border-top: 15rpx solid transparent;
			border-left: 20rpx solid #FEF0BC;
			border-bottom: 15rpx solid transparent;
			position: absolute;
			top: 20rpx;
			right: -20rpx;
		}

		.sanjiao2 {
			width: 0;
			height: 0;
			border-top: 15rpx solid transparent;
			border-right: 20rpx solid #FEF0BC;
			border-bottom: 15rpx solid transparent;
			position: absolute;
			top: 20rpx;
			left: -20rpx;
		}
	}

	.bottom {
		box-sizing: border-box;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #835d5f;
		background-color: #FEF0BC;
		border-bottom-right-radius: 12rpx;
		border-bottom-left-radius: 12rpx;
		justify-content: center;
	}

	.red_money {
		color: #ea4e75;
	}

	&.chat-bg {
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		color: #fff;
		//padding: 30rpx 30rpx 10rpx;
		//background-color: #fff;
		background: linear-gradient(180deg, #fea10a 0%, #ff8800 100%);

		image {
			margin-top: 10rpx;
			width: 80rpx;
			height: 80rpx;
		}
	}

	&.weixin-bg {
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		color: #fff;
		//padding: 30rpx 30rpx 10rpx;
		//background-color: #fff;
		background: linear-gradient(180deg, #12d269 0%, #00a500 100%);

		image {
			margin-top: 10rpx;
			width: 80rpx;
			height: 80rpx;
		}

		.desc {
			color: #fff;
			margin: 15rpx;
		}
	}

	&.chat-bg-ed {
		margin: 10rpx 20rpx;
		border-radius: 12rpx;
		background: linear-gradient(180deg, #ffe4a5 0%, #ffd590 100%);
		color: #fff;

		image {
			margin-top: 10rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}

	&.chat-bg2 {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 460rpx;
		height: 200rpx;
		margin: 0rpx auto 0;
		border-radius: 12rpx;
		color: #ffffff;
	}

	&.chat-own {
		margin-right: 30rpx;
	}

	&.chat-on {
		margin-left: 30rpx;
	}

	.wx-btn {
		width: 100%;
		padding: 0rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #161819;

		.btn-cancel {
			width: 150rpx;
			height: 50rpx;
			border-radius: 10rpx;
			color: #4C310C;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #B98B51
		}

		.btn-comfirm {
			width: 150rpx;
			height: 50rpx;
			border-radius: 10rpx;
			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			color: #4C310C;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #FEF0BC;
		}

		.btn-gift {
			width: 420rpx;
			height: 60rpx;
			border-radius: 15rpx;
			color: #fff;
			font-size: 32rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #ffc;
		}

		.desc {
			width: 100%;
			//height: 60rpx;
			border-radius: 15rpx;
			color: #fff;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.chat-wxbox {
	margin: 0rpx 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
	background-color: #fff;
	max-width: 480rpx;

	.chat-tit {
		display: flex;
		align-items: center;
		padding: 20rpx;

		.tit-head {
			width: 100rpx;
			height: 100rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tit-text {
			flex: 1;
			color: #111111;
		}
	}

	.chat-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 2rpx solid #d9d9d9;

		.btn-item {
			flex: 1;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

}


.send_vip {

	.price_item {
		.price_tit {
			margin: 10rpx 0;
		}
	}

	.wx_btn {
		justify-content: center !important;

		.btn_item {
			margin-top: 40rpx;
		}
	}
}

.gift_box {
	margin: 0rpx 20rpx;
	border-radius: 12rpx;
	background-color: #fff;
	max-width: 480rpx;
	width: 480rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 20rpx;

	.gift_icon {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.gift_iconMy {
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 65%;
			height: 65%;
		}
	}

	.gift_content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.tit {
			font-size: 32rpx;
			color: #111;
		}

		.lit {}

		.gift_btn {
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			color: #fff;
			padding: 10rpx 24rpx;
			background-image: linear-gradient(to right, #846DFF, #802FBB);
		}
	}
}

.chat-mask {
	position: relative;

	&::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(127, 127, 127, 0.43);
	}
}